<template>
    <div class="expert-consultation">
        <div class="container" v-if="list.length > 0">
            <MailItem
                @viewdetailinfo="viewdetailinfo"
                v-for="item in list"
                :key="item.id"
                :info="item"
            />
        </div>

        <img
            src="../../assets/暂无内容.png"
            alt="暂无数据"
            v-else
            class="nodata"
        />

        <el-dialog
            :title="status === 'view' ? '查看邮件' : '编辑邮件'"
            :visible.sync="dialogVisible"
            width="60%"
            style="padding: 0"
        >
            <template v-if="status === 'view'">
                <div class="container-detail">
                    <div class="detail-item detail-title">{{ info.title }}</div>
                    <div class="detail-item">
                        <span class="label">发件人:</span>
                        <span class="info">{{ info.fromUser }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span class="label">收件人:</span>
                        <span class="info">{{ info.toUser }}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span class="label">时间:</span>
                        <span class="info">{{ time }}</span>
                    </div>

                    <div class="container-content">
                        <MdViewer :context="info.content" />
                    </div>

                    <div class="container-btns">
                        <template v-if="username !== info.fromUser">
                            <el-button
                                type="primary"
                                @click="handleRecover(info)"
                                >回复</el-button
                            >
                        </template>

                        <el-button @click="dialogVisible = false"
                            >关闭</el-button
                        >
                    </div>
                </div>
            </template>
            <template v-if="status === 'edit'">
                <div class="edit-header">
                    <el-input
                        class="mail-title-input"
                        placeholder="请输入标题"
                        v-model="mailForm.title"
                    >
                        <template slot="prefix">
                            <div class="input-p-prefix">标题</div>
                        </template>
                    </el-input>
                    <el-select
                        class="mail-to-user-select"
                        v-model="mailForm.toUser"
                        placeholder="请选择接收专家"
                        style="width: 100%"
                        :disabled="disabled"
                    >
                        <el-option
                            v-for="item in experts"
                            :key="item.username"
                            :label="item.username"
                            :value="item.username"
                        >
                            <img
                                :src="getuserAvatar(item.username)"
                                alt=""
                                style="
                                    float: left;
                                    height: 30px;
                                    border-radius: 5px;
                                "
                            />
                            <span style="float: left; margin-left: 10px">{{
                                item.username
                            }}</span>
                        </el-option>
                        <template slot="prefix">
                            <div class="input-p-prefix">
                                {{ type === 0 ? "专家" : "用户" }}
                            </div>
                        </template>
                    </el-select>
                </div>
                <MdEditor @update:context="getContent" />
                <div class="btns">
                    <el-button type="danger" @click="handleCancel">
                        取消
                    </el-button>
                    <el-button type="primary" @click="hanldeSubmit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <div
            class="add-btn"
            @click="handleOpenDialog('edit')"
            v-if="type === 0"
        >
            编辑
        </div>
    </div>
</template>

<script>
import { sendEmil, getEmilList } from "../../api/index";
import MailItem from "../MailItem.vue";
import MdEditor from "../../components/MdEditor.vue";
import MdViewer from "../../components/MdViewer.vue";
import { createExpert, listUsers } from "../../api/";
import { fileToBase64, getImageFile, getUserAvatar, formatDate } from "@/utils";

export default {
    name: "ExpertConsultation",
    components: {
        MailItem,
        MdEditor,
        MdViewer,
    },

    data() {
        return {
            dialogVisible: false,
            status: "edit",
            list: [],
            title: 0,
            mailForm: {
                content: "",
                title: "",
                toUser: "",
            },
            experts: [],
            info: [],
            time: "",
            username: "",
            disabled: false,
            type: 0,
        };
    },

    methods: {
        viewdetailinfo(data) {
            this.dialogVisible = true;
            this.status = "view";
            this.info = data;
            this.time = formatDate(data.time);
        },

        handleOpenDialog(status) {
            this.disabled = false;
            this.mailForm = {
                content: "",
                title: "",
                toUser: "",
            };
            this.dialogVisible = true;
            this.status = status;
        },

        async getEmilList() {
            try {
                const res = await getEmilList({
                    pageNo: 1,
                    pageSize: 10,
                });
                this.list = res.data.data.list;
            } catch (err) {
                this.$message.error(err);
            }
        },

        getContent(data) {
            this.mailForm.content = data;
        },
        getuserAvatar(username) {
            return getUserAvatar(username);
        },

        async getExpertList() {
            const res = await listUsers("/user/list", {
                pageNo: 1,
                pageSize: 100000,
                type: 1,
            });
            if (res.data.code === 0) {
                this.experts = res.data.data.records;
            } else {
                this.$message.error(res.data.msg);
            }
        },

        handleCancel() {
            this.dialogVisible = false;
            this.mailForm = {
                content: "",
                title: "",
                toUser: "",
            };
        },

        async hanldeSubmit() {
            console.log(this.mailForm);
            const res = await sendEmil(this.mailForm);
            if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                this.handleCancel();
            } else {
                this.$message.error(res.data.msg);
            }
        },

        handleRecover(info) {
            this.disabled = true;
            this.status = "edit";
            let { fromUser } = info;
            this.mailForm.toUser = fromUser;
        },
    },

    mounted() {
        this.getEmilList();
        this.getExpertList();
        let { username, type } = JSON.parse(localStorage.getItem("userinfo"));
        this.username = username;
        this.type = type;
    },
};
</script>

<style lang="less">
.expert-consultation {
    position: relative;

    .container {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }

    .btns {
        display: flex;
        margin-top: 20px;
        justify-content: center;
    }

    .nodata {
        display: block;
        width: 50%;
        height: 50%;
        margin: 0 auto;
    }

    .container-detail {
        padding: 10px 20px;

        .detail-item {
            > .label {
                margin-right: 10px;
                display: inline-block;
                text-align: left;
                padding: 4px 0;
            }

            > .info {
                color: #ccc;
                font-size: 12px;
            }
        }

        .detail-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
        }
    }

    .container-content {
        margin-top: 20px;
        max-height: 500px;
        height: 400px;
        border-top: 1px solid #ccc;
    }

    .container-btns {
        display: flex;
        justify-content: flex-end;
    }

    .add-btn {
        width: 80px;
        height: 80px;
        background-color: #304156;
        position: fixed;
        z-index: 100;
        bottom: 40px;
        right: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        cursor: pointer;
    }
    .edit-header {
        margin-top: 20px;
    }

    .el-dialog__body {
        padding: 0;
        padding-bottom: 10px;
    }

    .mail-title-input {
        .el-input__inner {
            padding-left: 60px;
            border-radius: 0;
        }
    }
    .mail-to-user-select {
        .el-input__inner {
            padding-left: 60px;
            border-radius: 0;
            border: none;
        }
    }

    .input-p-prefix {
        color: black;
        font-weight: bold;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 10px;
    }

    .bytemd {
        height: 500px;
    }
}
</style>